<template>
  <div class="full-screen" v-loading="loading">
    <div class="base-header">
      <my-header></my-header>
    </div>
    <div class="base-body">
      <div class="base-show">
        <div class="base-upload">
          <el-image class="image-container" :src="url" fit="fit"></el-image>
          <el-upload
            :on-change="upload"
            :auto-upload="false"
            :show-file-list="false"
            accept=".jpg,.png,.jpeg"
          >
            <el-button slot="trigger" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <div class="base-matting">
          <el-image
            class="image-container"
            :src="mattingUrl"
            fit="fit"
            v-show="showSide"
          ></el-image>
          <div v-show="showSide">
            <el-color-picker
              v-model="curColor"
              color-format="hex"
              @active-change="activeChange"
            ></el-color-picker>
            <el-dropdown
              split-button
              type="primary"
              @command="selectSize"
              @click="selectSize(413, 295)"
              style="margin-left: 20px"
            >
              下载图片
              <template #dropdown>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="item in sizeConfig"
                    @click="selectSize(item.height, item.width)"
                    >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import MyHeader from "@/components/Header.vue";
import defAva from '@/assets/sg.png'
import { saveAs } from "file-saver";
import { mattingApi, downloadApi, combineApi } from "../../api/user.ts";
import { ref } from "vue";
const url = ref(defAva);
const mattingUrl = ref("");
const fileId = ref(null);
const mattingfile = ref(null);
const showSide = ref(false)
const downloadFile = ref(null);
const curColor = ref("#ffffff");
const loading = ref(false)
const sizeConfig = ref([
  {
    label: "小一寸  378X260",
    height: 378,
    width: 260,
  },

  {
    label: "一寸照  413X295",
    height: 413,
    width: 295,
  },
  {
    label: "大一寸  567X390",
    height: 567,
    width: 390,
  },

  {
    label: "小二寸  531X413",
    height: 531,
    width: 413,
  },

  {
    label: "二寸照  579X413",
    height: 579,
    width: 413,
  },
  {
    label: "大二寸  626X413",
    height: 626,
    width: 413,
  },

]);

// 下载图片
function download() {
  downloadApi({ file_id: downloadFile.value }).then((response: any) => {
    const filecontent: Blob = response.data;
    saveAs(filecontent, "background.png");
  });
}

function selectSize(height: any, width: any) {
    combineApi({ file_id: fileId.value, color: curColor.value, height: height,width:width }).then((response: any) => {
    downloadFile.value = response.data.file_id;
    download();
  });
}

// 颜色变换-选择
function activeChange(color: string | null) {
  if (color == null) {
    return;
  }

  curColor.value = color

}

//上传逻辑
function upload(file: any, fileList: any) {
  let formData = new FormData();
  formData.append("file", file.raw);
  showSide.value = false
  loading.value = true
  url.value = URL.createObjectURL(file.raw);
  mattingApi(formData).then((response: any) => {
    console.log("🚀 ~ mattingApi ~ mattingfile:", response);
    const file_id = response.data.file_id
    fileId.value = file_id;
    mattingfile.value = file_id;
    downloadFile.value = file_id;
    updateMatting();
  });
}

// 更新图片
function updateMatting() {
  downloadApi({ file_id: mattingfile.value }).then((response: any) => {
    const filecontent: Blob = response.data;
    mattingUrl.value = URL.createObjectURL(filecontent);
    loading.value = false
    showSide.value = true
  });
}
</script>

<style scoped>
.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-color: #f5f5f5;
}

.base-header {
  height: 6%;
}

.base-body {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  height: 94%;
}

.base-show {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  margin: 10px;
  border-radius: 10px;
}

.base-upload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  border-radius: 10px;
  width: 50%;
  background-color: #ffffff;
}

.base-matting {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  border-radius: 10px;
  width: 50%;
  background-color: #ffffff;
}

.image-container {
  width: 400px;
  height: 560px;
  margin-bottom: 30px;
  background-color: v-bind(curColor);
}
</style>
